<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { forEach } from 'lodash'
import { da } from 'element-plus/es/locale'
import { DEFAULT_ECHARTS_FONTSIZE,DIALOG_ECHARTS_FONTSIZE } from '@/Utils/setting'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible ? DIALOG_ECHARTS_FONTSIZE : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const props = defineProps<{
  chartData: any
  chartType?: any
  x: any
  y: any
}>()
const echartsName = props.chartData.title + Math.random()


const xData = ref([])
const yData = ref([])
let option = null
let dataZoom = []
var myChart
const createChart = () => {
  if (myChart != null && myChart != '' && myChart != undefined) {
    myChart.dispose() //解决echarts dom已经加载的报错
  }
  // 判断是否能获取到dom,如果不能直接结束
  const theDom = document.getElementById(echartsName)
  if (!theDom) {
    return ''
  }
  myChart = echarts.init(document.getElementById(echartsName))
  option = {
    tooltip: {
      // trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)', //默认值，提示背景颜色，默认为透明度为0.7的黑色
      padding: [
        changePixelSize(10), // 上
        changePixelSize(20), // 右
        changePixelSize(10), // 下
        changePixelSize(20), // 左
      ],

      textStyle: {
        fontSize: changePixelSize(fontSize),
        color: '#fff', //设置文字颜色
      },
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      data: xData.value,
      name: props.x,
      // nameLocation: 'center',
      nameTextStyle: {
        color: '#fff',
        // verticalAlign: 'bottom',
        // align: 'left',
        // padding: [changePixelSize(25), changePixelSize(20)],
        fontSize: changePixelSize(fontSize),
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        margin: changePixelSize(10),
        interval: 0,
        rotate: -45,
        fontSize: changePixelSize(fontSize),

        color: '#FEFEFF',
      },
    },
    yAxis: {
      type: 'value',
      name: props.y,
      // nameLocation: 'center',
      nameTextStyle: {
        color: '#fff',
        // verticalAlign: 'bottom',
        // align: 'left',
        // padding: [changePixelSize(25), changePixelSize(20)],
        fontSize: changePixelSize(fontSize),
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#123545',
          type: [5, 10],
        },
      },
      axisLabel: {
        fontSize: changePixelSize(fontSize),

        color: '#08ffff ',
      },
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '5%',
      top: '20%',
      containLabel: true,
    },
    series: [
      {
        data: yData.value,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#5df5f3',
        },
        itemStyle: {
          color: '#5df5f3',
        },
      },
    ],
    dataZoom: dataZoom,
  }

  addDataZoom()

  // 绘制图表
  myChart.setOption(option)
}

onMounted(() => {
  xData.value = []
  yData.value = []
  if (props.chartData.info && props.chartData.info.length > 0) {
    props.chartData.info.forEach((item) => {
      xData.value.push(item.name)
      yData.value.push(item.value)
    })
    nextTick(() => {
      createChart()
    })
  }
})

// 销毁前释放内存
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose()
  }
})

const addDataZoom = () => {
  if (props.chartType == 'MemberByMonth') {
    dataZoom = [
      /*
       {
          type: 'slider', //滑动条型数据区域缩放组件
          realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
          // start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          // end: 10,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
          height: 4,
          endValue: 11,  //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
          fillerColor: "rgba(17, 100, 210, 0.4)", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.1)",
          handleSize:0, // 两边手柄尺寸
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          top:'96%', //组件离容器上侧的距离
          zoomLock:true, // 是否只平移不缩放
          // moveOnMouseMove:true, //开启鼠标移动窗口平移
          // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
       },*/
      {
        type: 'inside', //内置型数据区域缩放组件
        show: false,
        endValue: 11, // 最多12个
        zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
        moveOnMouseMove: true, // 开启鼠标移动窗口平移
      },
    ]
    option.dataZoom = dataZoom
  } else {
    option.dataZoom = []
  }
}

watch(
  () => props.chartData,
  () => {
    xData.value = []
    yData.value = []
    if (props.chartData.info && props.chartData.info.length > 0) {
      props.chartData.info.forEach((item) => {
        xData.value.push(item.name)
        yData.value.push(item.value)
      })
      nextTick(() => {
        createChart()
      })
    }
  },
  { deep: true }
)
</script>

<template>
  <div
    :class="{
      'echart-box': true,
      'dialog-box': dialogInfoVisible == true,
    }"
  >
    <div class="chart" :id="echartsName"></div>
  </div>
</template>

<style lang="scss" scoped>
.echart-box {
  position: relative;
  width: 100%;
  height: calc(
    260px - 45px
  ); // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度
  .chart {
    width: 100%;
    height: 100%;
  }
  .test-btn {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.dialog-box {
  height: calc(
    500px - 45px
  ); // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度
}
</style>
